Getting started topic
Getting started
Installation
In the pubspec.yaml
of your flutter project, add the following dependency:
dependencies:
flutter_easy_dialogs: <latest_version>
In your library add the following import:
import 'package:flutter_easy_dialogs/flutter_easy_dialogs.dart';
Setup and usage
Wrap your MaterialApp with FlutterEasyDialogs.builder() and you are ready to go.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: FlutterEasyDialogs.builder(),
);
}
}
Now you are able to call show methods from FlutterEasyDialogs like so:
FlutterEasyDialogs.show(
EasyDialog.positioned(
decoration: const EasyDialogAnimation.fade(),
content: Container(
height: 150.0,
color: Colors.blue[900],
alignment: Alignment.center,
child: const Text(
'Dialog',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
),
),
);
Or:
Container(
height: 150.0,
color: Colors.blue[900],
alignment: Alignment.center,
child: const Text(
'Dialog',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
).positioned().fade().show();
Or to hide with the help of specific dialog id
:
FlutterEasyDialogs.hide(id: EasyDialogPosition.top);
You can await and and finish dialog showing with some result:
final result = await FlutterEasyDialogs.show<int>(
EasyDialog.positioned(
content: Container(
height: 150.0,
color: Colors.amber[900],
alignment: Alignment.center,
child: const Text('Dialog'),
),
position: EasyDialogPosition.bottom,
),
);
await FlutterEasyDialogs.hide(
id: EasyDialogPosition.bottom,
result: 5,
);
Or:
final result = await Container(
height: 150.0,
color: Colors.amber[900],
alignment: Alignment.center,
child: const Text('Dialog'),
).positioned(position: EasyDialogPosition.bottom).show<int>();
await FlutterEasyDialogs.hide(
id: EasyDialogPosition.bottom,
result: 5,
);
If needed, there is an option to hide multiple dialogs at once.
FlutterEasyDialogs.hideWhere<PositionedDialog>(
(dialog) =>
dialog.position == EasyDialogPosition.bottom ||
dialog.position == EasyDialogPosition.top,
);
Extension
There is an extension that provides alternative ways to show and hide dialogs.
final dialog = Container(
height: 150.0,
color: Colors.blue[900],
alignment: Alignment.center,
child: Text(
'bottom',
style: const TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
)
.positioned(position: EasyDialogPosition.bottom)
.fade()
.swipe(instantly: false)
.animatedTap()
.slideHorizontal()
.slideVertical()
.blurBackground(backgroundColor: Colors.red.withOpacity(0.5));
final result = await dialog.show<int>();
await dialog.hide(result: 5);
Classes
- EasyDialog Getting started Dialogs
- Base dialog class.
- EasyDialogContext Getting started Dialogs
- Context that provides some useful methods and properties that are associated with specific EasyDialog.
- EasyDialogsController Getting started Dialogs Migration guide from 2.x to 3.x
- Core class for manipulating dialogs.
- FlutterEasyDialogs Getting started Dialogs Migration guide from 2.x to 3.x FAQ
- Wrapper for providing an easy use of different custom dialogs.
Extensions
- EasyDialogsX on EasyDialog Getting started Dialogs
- Shortcuts for EasyDialog.
- EasyDialogWidgetX on Widget Getting started
- Shortcuts for Widget.